<template>
  <view class="reservation-container">
    <!-- 顶部标题栏 -->
    <view class="header animate-fade-in">
      <view class="title">景点预约</view>
      <view class="subtitle">提前预约，避免拥挤</view>
    </view>

    <!-- 预约表单卡片 -->
    <view class="form-card animate-scale-in">
      <!-- 景点选择 -->
      <view class="form-item">
        <text class="label">选择景点</text>
        <picker @change="onScenicChange" :value="selectedScenicIndex" :range="scenicList" range-key="name">
          <view class="picker-box">
            <text class="picker-text">{{ selectedScenic ? selectedScenic.name : '请选择景点' }}</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 日期选择 -->
      <view class="form-item">
        <text class="label">预约日期</text>
        <picker mode="date" :value="selectedDate" :start="startDate" :end="endDate" @change="onDateChange">
          <view class="picker-box">
            <text class="picker-text">{{ selectedDate || '请选择日期' }}</text>
            <uni-icons type="calendar" size="16" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 时间段选择 -->
      <view class="form-item">
        <text class="label">参观时段</text>
        <view class="time-slots">
          <view 
            v-for="(slot, index) in timeSlots" 
            :key="index"
            :class="['time-slot-item', { active: selectedTimeSlotIndex === index }]"
            @tap="onTimeSlotTap(index)"
            hover-class="time-slot-hover"
            hover-stay-time="100"
          >
            <view class="time-slot-content">{{ slot }}</view>
            <!-- 添加波纹效果 -->
            <view v-if="rippleIndex === index" class="ripple-effect"></view>
          </view>
        </view>
      </view>

      <!-- 人数选择 -->
      <view class="form-item">
        <text class="label">预约人数</text>
        <view class="number-picker">
          <view class="number-btn" 
            @touchstart="startDecrease" 
            @touchend="stopContinuous"
            @touchcancel="stopContinuous">
            <uni-icons type="minus" size="18" color="#666"></uni-icons>
          </view>
          <text class="number-value">{{ visitorCount }}人</text>
          <view class="number-btn" 
            @touchstart="startIncrease"
            @touchend="stopContinuous"
            @touchcancel="stopContinuous">
            <uni-icons type="plus" size="18" color="#666"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 预约须知卡片 -->
    <view class="notice-card animate-scale-in" style="animation-delay: 0.2s">
      <view class="notice-header">
        <uni-icons type="info" size="16" color="#ff6600"></uni-icons>
        <text class="notice-title">预约须知</text>
      </view>
      <view class="notice-content">
        <text class="notice-item">• 每个账号每天限预约1个时段</text>
        <text class="notice-item">• 请至少提前1天预约</text>
        <text class="notice-item">• 如需取消预约请提前24小时</text>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button 
      class="submit-btn animate-fade-in" 
      :class="{ 'btn-disabled': !isFormValid }"
      @tap="submitReservation"
      :disabled="!isFormValid || isSubmitting"
    >
      {{ isSubmitting ? '预约中...' : '确认预约' }}
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 人数相关
      visitorCount: 1,  // 默认1人
      minVisitors: 1,   // 最少人数
      maxVisitors: 10,  // 最大人数
      continuousTimer: null,
      continuousDelay: 100, // 持续增减的时间间隔(毫秒)
      longPressTimer: null, // 用于判断长按的定时器
      longPressDelay: 500, // 长按判定时间(毫秒)
      isLongPress: false,  // 是否是长按状态
      
      // 其他数据保持不变
      isSubmitting: false,
      
      // 时间段相关数据
      timeSlots: [], // 可选时间段
      selectedTimeSlotIndex: -1, // 选中的时间段索引
      selectedScenic: null,
      selectedScenicIndex: -1,
      selectedDate: '',
      scenicList: [], // 景点列表
      
      // 日期范围
      startDate: this.getStartDate(),
      endDate: this.getEndDate(),
      rippleIndex: -1, // 添加用于控制波纹效果的索引
    }
  },
  methods: {
    // 开始持续减少
    startDecrease() {
      this.isLongPress = false
      // 先执行一次减少操作
      this.decreaseVisitors()
      
      // 设置长按检测
      this.longPressTimer = setTimeout(() => {
        this.isLongPress = true
        // 开始持续减少
        this.continuousTimer = setInterval(() => {
          this.decreaseVisitors()
        }, this.continuousDelay)
      }, this.longPressDelay)
    },

    // 开始持续增加
    startIncrease() {
      this.isLongPress = false
      // 先执行一次增加操作
      this.increaseVisitors()
      
      // 设置长按检测
      this.longPressTimer = setTimeout(() => {
        this.isLongPress = true
        // 开始持续增加
        this.continuousTimer = setInterval(() => {
          this.increaseVisitors()
        }, this.continuousDelay)
      }, this.longPressDelay)
    },

    // 停止持续增减
    stopContinuous() {
      // 清理长按检测定时器
      if (this.longPressTimer) {
        clearTimeout(this.longPressTimer)
        this.longPressTimer = null
      }
      
      // 清理持续增减定时器
      if (this.continuousTimer) {
        clearInterval(this.continuousTimer)
        this.continuousTimer = null
      }
    },

    // 减少人数
    decreaseVisitors() {
      if (this.visitorCount > this.minVisitors) {
        this.visitorCount--
      } else {
        uni.showToast({
          title: '至少预约1人',
          icon: 'none'
        })
      }
    },
    
    // 增加人数
    increaseVisitors() {
      if (this.visitorCount < this.maxVisitors) {
        this.visitorCount++
      } else {
        uni.showToast({
          title: `最多可预约${this.maxVisitors}人`,
          icon: 'none'
        })
      }
    },

    // 获取可选开始日期（明天）
    getStartDate() {
      const tomorrow = new Date()
      tomorrow.setDate(tomorrow.getDate() + 1)
      return this.formatDate(tomorrow)
    },
    
    // 获取可选结束日期（30天后）
    getEndDate() {
      const endDate = new Date()
      endDate.setDate(endDate.getDate() + 30)
      return this.formatDate(endDate)
    },
    
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },

    // 景点选择变化
    async onScenicChange(e) {
      this.selectedScenicIndex = e.detail.value
      this.selectedScenic = this.scenicList[this.selectedScenicIndex]
      this.selectedTimeSlotIndex = -1 // 重置时间段选择
      await this.updateTimeSlots()
    },

    // 日期选择变化
    async onDateChange(e) {
      this.selectedDate = e.detail.value
      this.selectedTimeSlotIndex = -1 // 重置时间段选择
      await this.updateTimeSlots()
    },

    // 更新可选时间段
    async updateTimeSlots() {
      // 重置时间段
      this.timeSlots = []
      
      // 只有��择了景点和日期才获取时间段
      if (!this.selectedScenic || !this.selectedDate) {
        return
      }

      try {
        // 这里应该调用后端API获取实际可预约的时间段
        // 示例数据
        this.timeSlots = [
          '09:00-11:00',
          '11:00-13:00',
          '13:00-15:00',
          '15:00-17:00'
        ]
      } catch (error) {
        uni.showToast({
          title: '获取时间段失败',
          icon: 'none'
        })
      }
    },

    // 选择时间段
    onTimeSlotTap(index) {
      this.selectedTimeSlotIndex = index
      // 触发波纹效果
      this.rippleIndex = index
      // 动画结束后重置
      setTimeout(() => {
        this.rippleIndex = -1
      }, 600) // 与动画持续时间保持一致
    },
  },
  
  computed: {
    // 表单是否有效
    isFormValid() {
      return this.selectedScenic && 
             this.selectedDate && 
             this.selectedTimeSlotIndex !== -1 && 
             this.visitorCount >= this.minVisitors &&
             this.visitorCount <= this.maxVisitors
    }
  },

  // 组件创建时获取景点列表
  async created() {
    try {
      // 这里应该调用后端API获取实际的景点列表
      // 示例数据
      this.scenicList = [
        { id: 1, name: '故宫博物院' },
        { id: 2, name: '颐和园' },
        { id: 3, name: '天坛公园' }
      ]
    } catch (error) {
      uni.showToast({
        title: '获取景点列表失败',
        icon: 'none'
      })
    }
  }
}
</script>

<style>
.reservation-container {
  padding: 20px;
  background: #f8f8f8;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

.form-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.form-item {
  margin-bottom: 20px;
}

.label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

.picker-box {
  height: 44px;
  padding: 0 15px;
  background: #f8f8f8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.picker-text {
  font-size: 14px;
  color: #333;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.time-slot-item {
  position: relative;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: #f8f8f8;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  overflow: hidden;
  transform-origin: center;
  will-change: transform, background-color, color, box-shadow;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease;
}

.time-slot-hover {
  transform: scale(0.95);
  opacity: 0.8;
}

.time-slot-item.active {
  background: #ff6600;
  color: #fff;
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.2);
}

/* 波纹效果 */
.ripple-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 0.6s ease-out;
}

/* 时间段内容 */
.time-slot-content {
  position: relative;
  z-index: 1;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* 悬停效果 */
.time-slot-item:not(.active):hover {
  background: #f5f5f5;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.number-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 6px;
}

.number-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
}

.number-value {
  margin: 0 20px;
  font-size: 16px;
  color: #333;
  min-width: 60px;
  text-align: center;
}

.notice-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.notice-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.notice-title {
  font-size: 16px;
  color: #333;
  margin-left: 6px;
}

.notice-item {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  display: block;
}

.submit-btn {
  width: 90%;
  height: 44px;
  line-height: 44px;
  background: #ff6600;
  color: #fff;
  font-size: 16px;
  border-radius: 22px;
  margin: 30px auto;
  text-align: center;
  transition: all 0.3s;
}

.btn-disabled {
  background: #ccc;
}

/* 动画效果 */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
